import { memo, useState } from 'react'
import { Typography, Empty, Table, Tag, Space, Button, Modal, Spin, message } from 'antd'
import { ExclamationCircleFilled } from '@ant-design/icons'
import styles from './Trash.module.scss'
import { useRequest, useTitle } from 'ahooks'
import ListSearch from '@/components/ListSearch'
import useQuestionListData from '@/hooks/useQuestionListData'
import ListPagination from '@/components/Pagination'
import { deleteQuestion, updateQuestion } from '@/service/module/question'

const { Title } = Typography
const { confirm } = Modal

const Trash = memo(() => {
  useTitle('小慕问卷-回收站')
  const [selectQIds, setSelectQIds] = useState<string[]>([])
  const { data = {}, loading, refresh } = useQuestionListData({ isDeleted: true })
  const { list = [], total = 0 } = data

  const tableColumn = [
    { title: '标题', dataIndex: 'title' },
    {
      title: '是否发布',
      dataIndex: 'isPublished',
      render: (isPublished: boolean) => {
        return isPublished ? <Tag color="processing">已发布</Tag> : <Tag>未发布</Tag>
      },
    },
    { title: '答卷', dataIndex: 'answerCount' },
    { title: '创建时间', dataIndex: 'createAt' },
  ]

  //恢复问卷
  const { run: recover } = useRequest(
    async () => {
      for await (const id of selectQIds) {
        await updateQuestion(id, { isDeleted: false })
      }
    },
    {
      manual: true,
      debounceWait: 500, //防抖
      onSuccess() {
        message.success('恢复成功')
        refresh()
        setSelectQIds([])
      },
    }
  )

  const { run: deleteQs } = useRequest(async () => await deleteQuestion(selectQIds), {
    manual: true,
    onSuccess() {
      message.success('删除成功')
      refresh()
      setSelectQIds([])
    },
  })

  //彻底删除
  const del = () => {
    confirm({
      title: '确定彻底删除该问卷？',
      content: '删除之后无法找回',
      icon: <ExclamationCircleFilled />,
      onOk() {
        deleteQs()
      },
    })
  }

  const tableRender = (
    <>
      <Space style={{ marginBottom: '14px' }}>
        <Button type="primary" disabled={selectQIds.length === 0} onClick={recover}>
          恢复
        </Button>
        <Button danger disabled={selectQIds.length === 0} onClick={del}>
          彻底删除
        </Button>
      </Space>

      <Table
        dataSource={list}
        columns={tableColumn}
        pagination={false}
        rowKey={(q: any) => q.id}
        rowSelection={{
          type: 'checkbox',
          onChange: selectedRowKeys => {
            setSelectQIds(selectedRowKeys as string[])
          },
        }}
      />
    </>
  )

  return (
    <>
      <div className={styles.trash}>
        <div className={styles.header}>
          <Title level={3}>回收站 </Title>
          <ListSearch />
        </div>
        <div className={styles.QList}>
          {loading && (
            <div style={{ textAlign: 'center' }}>
              <Spin />
            </div>
          )}

          {!loading && list.length === 0 && <Empty />}
          {!loading && tableRender}
        </div>

        <div className={styles.footer}>
          <ListPagination total={total} />
        </div>
      </div>
    </>
  )
})

export default Trash
